<template>
  <basic-container>
    <div class="app-container calendar-list-container">
      <div class="filter-container">
        <el-button v-if="attendance_schedule_add" class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加
        </el-button>
      </div>
      <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="主键" type="index">
          <!-- <template slot-scope="scope">
                    <span></span>
                </template> -->
        </el-table-column>
        <el-table-column align="center" label="班次名称">
          <template slot-scope="scope">
            <span>{{ scope.row.scheduleName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="一天上下班几次" prop="">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="第一次上班">
          <template slot-scope="scope">
            <span>{{ scope.row.firstStart | formatTotime('{h}:{i}')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="第一次下班">
          <template slot-scope="scope">
            <span>{{ scope.row.firstEnd | formatTotime('{h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="第二次上班">
          <template slot-scope="scope">
            <span>{{ scope.row.secondStart | formatTotime('{h}:{i}')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="第二次下班">
          <template slot-scope="scope">
            <span>{{ scope.row.secondEnd | formatTotime('{h}:{i}') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="attendance_schedule_upd" size="small" type="success" @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button v-if="attendance_schedule_del" size="mini" type="danger" @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-input v-model="form.id" type="hidden" style="display: none!important;"></el-input>
          <!-- <el-form-item label="" prop="username">
                        <el-input v-model="form.id" placeholder=""></el-input>
                    </el-form-item> -->
          <el-form-item label="班次名称" prop="scheduleName">
            <el-input v-model="form.scheduleName" placeholder="班次名称"></el-input>
          </el-form-item>
          <el-form-item label="工作班次" prop="number">
            <el-select v-model="form.number" placeholder="请选择" @change="changedd()">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="form.number" placeholder="一天上下班几次 1次：2次"></el-input> -->
          </el-form-item>
          <el-form-item label="第一班次" prop="first">
            <el-time-picker v-model="form.first" is-range placeholder="任意时间点" format="HH:mm" value-format="HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-time-picker>
            <!-- <el-input v-model="form.firstStart" placeholder="第一次上班 小时"></el-input> -->
          </el-form-item>
          <!-- <el-form-item label="第一次下班" prop="username">
                        <el-time-picker
                            v-model="form.firstEnd"
                            placeholder="任意时间点"
                            value-format="HH:mm:ss"
                            format="HH:mm"
                            >
                        </el-time-picker>
                    </el-form-item> -->
          <el-form-item label="第二班次" prop="second" v-if="this.form.number==2">
            <el-time-picker v-model="form.second" is-range :picker-options="{
                                minTime: '08:30'
                            }" placeholder="任意时间点" format="HH:mm" value-format="HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-time-picker>
            <!-- <el-input v-model="form.secondStart" placeholder="第二次上班"></el-input> -->
          </el-form-item>
          <!-- <el-form-item label="第二次下班" prop="username">
                        <el-time-picker
                            arrow-control
                            v-model="form.secondEnd"
                            placeholder="任意时间点"
                            value-format="HH:mm:ss"
                            format="HH:mm">
                        </el-time-picker>
                    </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel('form')">取 消</el-button>
          <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
          <el-button v-else type="primary" @click="update('form')">修 改</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
import {
  fetchList,
  addObj,
  putObj,
  delObj
} from '@/api/attendence/attendanceSchedule'
import waves from '@/directive/waves/index.js' // 水波纹指令
import { mapGetters } from 'vuex'

export default {
  name: 'table_attendance_schedule',
  directives: {
    waves
  },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      options: [
        {
          value: 1,
          label: '1天一次上下班'
        },
        {
          value: 2,
          label: '1天两次上下班'
        }
      ],
      rules: {
        scheduleName: [
          {
            required: true,
            message: '请输入班次名称'
          }
        ],
        number: [
          {
            required: true,
            message: '请选择工作班次'
          }
        ],
        first: [
          {
            required: true,
            message: '请输入第一次班次起止时间'
          }
        ],
        second: [
          {
            required: true,
            message: '请输入第二次班次起止时间'
          }
        ]
      },
      form: {
        first: [],
        second: [],
        scheduleName: '',
        number: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      attendance_schedule_add: true,
      attendance_schedule_upd: true,
      attendance_schedule_del: true,
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableKey: 0
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '有效',
        1: '无效'
      }
      return statusMap[status]
    }
  },
  created() {
    this.getList()
    // this.attendance_schedule_add = this.permissions['attendance_schedule_add']
    // this.attendance_schedule_upd = this.permissions['attendance_schedule_upd']
    // this.attendance_schedule_del = this.permissions['attendance_schedule_del']
  },
  methods: {
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('HH:mm')
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.form = Object.assign(this.form, row)
      this.form.first = []
      this.form.second = []
      this.form.first.push(row.firstStart || '')
      this.form.first.push(row.firstEnd || '')
      this.form.second.push(row.secondStart || '')
      this.form.second.push(row.secondEnd || '')
      // this.form.scheduleName = row.scheduleName
      // this.form.number = row.number
      // this.form.id = row.id
      // console.log(this.form)
    },
    handleDelete(row) {
      delObj(row.id).then(response => {
        this.dialogFormVisible = false
        this.getList()
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.form = {}
    },
    changedd() {
      console.log(this.form.number)
    },
    setTimeParam() {
      console.log(this.form)
      /*如果第一班次有值 */
      if (this.form.first != undefined) {
        this.form.firstStart = this.form.first[0]
        this.form.firstEnd = this.form.first[1]
      }
      /*如果有第二班次有值 */
      if (this.form.second != undefined) {
        this.form.secondStart = this.form.second[0]
        this.form.secondEnd = this.form.second[1]
      }
      /**当前选择的班次为1则清空第二班次的值 */
      if (this.form.number == 1) {
        this.form.secondStart = null
        this.form.secondEnd = null
      }
    },
    create(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.setTimeParam()
          addObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    cancel(formName) {
      this.dialogFormVisible = false
      const set = this.$refs
      set[formName].resetFields()
    },
    update(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          this.form.password = undefined
          this.setTimeParam()
          putObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
